<template>
      <div class="videoBasics">
        <vue3VideoPlay v-bind="videoOptions" :poster="poster" />
      </div>
</template>


 <script>

 import "vue3-video-play/dist/style.css";
 import vue3VideoPlay from "vue3-video-play";
 import {reactive, toRefs} from "vue";

 export default {
  name:"VideoPage",
   components: {
     vue3VideoPlay,
   },

   props: {
     videoUrl: {
       type: String
     },
     // eslint-disable-next-line vue/require-prop-type-constructor
     poster:""
   },

   data() {
     return {
     }
   },

   setup(props) {

     let data = reactive({
       videoOptions: {
         width: "800px", //播放器高度
         height: "450px", //播放器高度
         color: "#409eff", //主题色
         title: "", //视频名称
         src: props.videoUrl, //视频源
         muted: false, //静音
         webFullScreen: false,
         speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
         autoPlay: false, //自动播放
         loop: false, //循环播放
         mirror: false, //镜像画面
         ligthOff: true, //关灯模式
         volume: 0.3, //默认音量大小
         control: true, //是否显示控制
         controlBtns: [
           "audioTrack",
           "quality",
           "speedRate",
           "volume",
           "setting",
           "pip",
           "pageFullScreen",
           "fullScreen",
         ], //显示所有按钮,
       },
       poster: props.poster
     });

     return {
       ...toRefs(data)
     }

   },
 }

</script>

<style scoped>

/*基础背景，设定指定宽度*/
.videoBasics{
  /*绝对定位居中*/
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

/*美化滚动条*/
.videoBasics::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.videoBasics::-webkit-scrollbar-track {
  background-color:#F5F5F5;
}
.videoBasics::-webkit-scrollbar-thumb {
  background-color:#c8c8c8;
}

</style>